<template>
  <div class="app-container home">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="tip">
          尊敬的 {{ user.userName }} 欢迎您！您上次的登录IP为：{{ user.loginIp }}；当前系统版本为：{{ version }}
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="4">
        <div class="home-item">
          <div class="card-panel">
            <div class="card-iconSize f-err-color">
              <i class="el-icon-link"></i>
            </div>
            <div class="card-text">
              <div class="title-top">待审核链接数量</div>
              <div class="title-number f-err-color">{{ auditCount }}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="4">
        <div class="home-item">
          <div class="card-panel">
            <div class="card-iconSize f-color">
              <i class="el-icon-link"></i>
            </div>
            <div class="card-text">
              <div class="title-top">链接数量</div>
              <div class="title-number">{{ noAuditCount }}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="4">
        <div class="home-item">
          <div class="card-panel">
            <div class="card-iconSize f-color">
              <i class="el-icon-chat-line-round"></i>
            </div>
            <div class="card-text">
              <div class="title-top">评论数量</div>
              <div class="title-number">{{ commentCount }}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="4">
        <div class="home-item">
          <div class="card-panel">
            <div class="card-iconSize f-color">
              <i class="el-icon-price-tag"></i>
            </div>
            <div class="card-text">
              <div class="title-top">标签数量</div>
              <div class="title-number">{{ labelCount }}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="4">
        <div class="home-item">
          <div class="card-panel">
            <div class="card-iconSize f-color">
              <i class="el-icon-position" />
            </div>
            <div class="card-text">
              <div class="title-top">接口数量</div>
              <div class="title-number">{{ apiCount }}</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getUserProfile} from "@/api/system/user";
import { noAuditCount, auditCount } from "@/api/navigation/web";
import { commentsCount } from "@/api/navigation/comments";
import { labelCount } from "@/api/navigation/label";
import {getVersion} from "@/api/system/config";
import {apiCount} from "@/api/navigation/api";

export default {
  name: "Index",
  data() {
    return {
      user: {},
      //非审核链接数量
      noAuditCount: 0,
      //审核链接数量
      auditCount: 0,
      //评论数量
      commentCount: 0,
      //标签数量
      labelCount: 0,
      //接口数量
      apiCount: 0,
      //版本号
      version: "v1.0"
    };
  },
  created() {
    this.getUser();
    this.getCount();
    //获取系统版本号
    getVersion().then(response => {
      this.version = "v" + response.data;
    });
  },
  methods: {
    getCount(){
      noAuditCount().then(res => {
        this.noAuditCount = res.data;
      });
      auditCount().then(res => {
        this.auditCount = res.data;
      });
      commentsCount().then(res => {
        this.commentCount = res.data;
      });
      labelCount().then(res => {
        this.labelCount = res.data;
      });
      apiCount().then(res => {
        this.apiCount = res.data;
      });
    },
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #676a6c;
  overflow-x: hidden;
}
.tip{
  padding: 10px;
  box-shadow: 4px 4px 40px rgb(0 0 0 / 5%);
  border: 1px solid rgba(0,0,0,.05);
  margin-bottom: 10px;
  border-radius: 10px;
}
.card-panel{
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-box-shadow: 4px 4px 40px rgb(0 0 0 / 5%);
  box-shadow: 4px 4px 40px rgb(0 0 0 / 5%);
  border: 1px solid rgba(0,0,0,.05);
  padding: 20px;
  border-radius: 10px;
}
.card-iconSize{
  font-size: 60px;
}
.card-text{
  font-size: 20px;
}
.title-top{
  color: #8C8C8C;
  font-size: 16px;
  margin-bottom: 10px;
}
.title-number{
  color: #666666;
}
.f-color{
  color: #409EFF;
}
.f-err-color{
  color: #ff4949;
}
</style>

